<template class="box">
  <div class="interview-Top">
    <div>
      <p style="font-size: 26px; font-weight: 300; margin-bottom: 10px">面试记录</p>
      <p style="color: #666">查看并管理所有面试记录和结果</p>
    </div>
    <el-button type="primary" style="width: 120px; height: 40px">+安排新面试</el-button>
  </div>
  <list :listTitle="listTitle">
    <template #lists>
      <el-table :data="tableData" style="width: 100%; height: 400px">
        <el-table-column prop="name" label="候选人" width="180" />
        <el-table-column prop="posts" label="职位" width="180" />
        <el-table-column prop="interviewer" label="面试官" />
        <el-table-column prop="date" label="日期" />
        <el-table-column prop="duration" label="时长" />
        <el-table-column prop="state" label="状态" />
        <el-table-column prop="score" label="得分" />
        <el-table-column label="操作">
          <div>
            <el-button type="text" size="small" style="display: flex; align-items: center"
              ><el-icon><View /></el-icon>查看详情</el-button
            >
          </div>
        </el-table-column>
      </el-table>
    </template>
  </list>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getInterviewList } from '@/api/gts/interviewList'
import '@/mockjs/gts/pagination.ts'
import list from '@/components/list.vue'

let tableData = ref([])
const listTitle = ref('面试列表')

onMounted(async () => {
  // mockjs的模拟数据
  const res = await getInterviewList()
  tableData.value = res.items
})
</script>

<style scoped>
.box {
  padding: 30px 20px;
}
.interview-Top {
  display: flex;
  justify-content: space-between;
}
.interview-Table {
  background-color: #fff;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
